<template>
  <div class="example-wrapper">
    <button class="btn" @click="create()" >create</button>
    <button class="btn" @click="createAndEdit()" style="width: 150px;">create and edit</button>
    <button class="btn" @click="remove()" >remove</button>
    <button class="btn" @click="edit()" >edit</button>
    <!-- <button class="btn" @click="test()" >get</button> -->
    <input type="text" v-model="keyword" placeholder="search" @input="search()">
    <div class="panel">
      <TWTree :tree="tree" ref="tree" @blur="blur" class="tree" />
    </div>
  </div>
</template>

<script>
import TWTree from "twtree"
export default {
  name: "getting-started-basic-operations-example",
  components: {
    TWTree
  },
  data () {
    return {
      counter: 100,
      keyword: "",
      tree: this.a
    }
  },
  methods: {
    blur (node) {
      let tree = this.$refs.tree
      tree.quitEdit(node)
    },
    create () {
      this.counter += 1
      let tree = this.$refs.tree
      let node = tree.getSelectedOne()
      let child = {
        id: this.counter,
        title: "hello, world!" + this.counter,
        hasChild: false
      }
      tree.create(child, node)
    },
    createAndEdit () {
      this.counter += 1
      let tree = this.$refs.tree
      let node = tree.getSelectedOne()
      let child = {
        id: this.counter,
        title: "hello, world!" + this.counter,
        hasChild: false
      }
      tree.createAndEdit(child, node)
    },
    remove () {
      let tree = this.$refs.tree
      let node = tree.getSelectedOne()
      tree.remove(node)
    },
    edit () {
      let tree = this.$refs.tree
      let node = tree.getSelectedOne()
      tree.edit(node)
    },
    search () {
      let tree = this.$refs.tree
      if (this.keyword === "") {
        tree.clearSearchResult()
      } else {
        tree.search(this.keyword)
      }
    }
  }
}
</script>
<script>
(function test (){
 $.get('http://121.4.176.83:90/api/menu/getmenujson',function (json){
    let jsonTree = jsonTOJsonTree(json, {id:'id', pid:'parentId', children:'children'})
    console.log(jsonTree);

    let json2 = jsonTreeToJson(jsonTree, {id:'id', pid:'parentId', children:'children'})
    console.log(json2);})
})()

/**
 * 将扁平化数据(json)转成jsonTree格式
 * @param  {[type]} data   扁平数据
 * @param  {[type]} config {id:'id', pid:'pid', children:'children'}
 *                         id 数据里的id string类型
 *                         pid 数据里的父id string类型
 *                         children 生成结果中子节点的字段名 string类型
 * @return {[type]}        [description]
 */
function jsonTOJsonTree (data, config) {
    let id = config.id || 'id',
        pid = config.pid || 'pid',
        children = config.children || 'children',
        idMap = [],
        jsonTree = []
    data.forEach(function(v) {
        idMap[v[id]] = v
    })
    data.forEach(function(v) {
        let parent = idMap[v[pid]]
        if (parent) {
            !parent[children] && (parent[children] = [])
            [children].push(v)
        } else {
            jsonTree.push(v)
        }
    })
    return jsonTree
}

/**
 * 将jsonTree格式数据转成扁平化(json)数据
 * @param  {[type]} data   jsonTree格式数据
 * @param  {[type]} config {id:'id', pid:'pid', children:'children'}
 *                         id 数据里的id string类型
 *                         pid 数据里的父id string类型
 *                         children 数据里子节点字段名 string类型
 * @return {[type]}        [description]
 */
function jsonTreeToJson (data, config) {
    let id = config.id || 'id',
        pid = config.pid || 'pid',
        children = config.children || 'children',
        json = []
    json = data.reduce((arr, cur) => {
        let item = Object.assign({}, cur)
        if(children in cur){
            delete item[children]
            return arr.concat([item], jsonTreeToJson(cur[children], config));
        }else {
            return arr.concat([item])
        }
    }, [])
    return json
}

</script>
<style scoped>
.panel .tree {
  width: 50%;
}
.btn {
  width: 100px;
  margin-right: 20px;
}
</style>
